<template>
  <div class="pAndS">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="服务列表" name="first">
        <header>
          <el-button type="primary" @click="addServe">新增服务</el-button>
        </header>
        <el-table :data="serveList">
          <el-table-column prop="date" label="服务图标">
            <template slot-scope="scope">
              <span class="imgs">
                <img :src="scope.row.cover" alt />
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="title" label="服务名称"></el-table-column>
          <el-table-column prop="remark" label="服务简介" show-overflow-tooltip></el-table-column>
          <el-table-column prop="address" label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="案例列表" name="second">
        <header>
          <el-button type="primary" @click="addCase">新增案例</el-button>
        </header>
        <el-table :data="demoList">
          <el-table-column prop="date" label="封面">
            <template slot-scope="scope">
              <span class="imgs">
                <img :src="scope.row.cover" alt />
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="title" label="案例名称"></el-table-column>
          <el-table-column prop="brief" label="项目背景" show-overflow-tooltip></el-table-column>
          <el-table-column prop="brief" label="项目介绍" show-overflow-tooltip></el-table-column>
          <el-table-column prop="brief" label="项目目标" show-overflow-tooltip></el-table-column>
          <el-table-column prop="address" label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEditCase(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDeleteCase(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="pageSie"
            :page-sizes="[10, 20, 30, 40, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-dialog
        :title="serveTitle"
        :close-on-click-modal="false"
        :visible.sync="isShowServeDialog"
      >
        <div class="each cover">
          <b>*</b>
          <span>图标:</span>
          <img :src="serveObj.cover" alt="图标" v-if="serveObj.cover" />
          <Upload :name="serveObj.cover ? '重新上传' : '上传图片'" type="news" @saveCb="onUploadSuccess"></Upload>
        </div>
        <div class="each">
          <b>*</b>
          <span>标题:</span>
          <el-input v-model="serveObj.title" placeholder="请输入标题"></el-input>
        </div>
        <div class="each">
          <b>*</b>
          <span>简介:</span>
          <el-input v-model="serveObj.remark" placeholder="请输入简介"></el-input>
        </div>
        <div class="btns">
          <div class="btn">
            <el-button type="info" @click="isShowServeDialog = false">取消</el-button>
          </div>
          <div class="btn">
            <el-button type="primary" @click="saveServe">确定</el-button>
          </div>
        </div>
      </el-dialog>
      <el-dialog
        :title="caseTitle"
        top="5vh"
        :close-on-click-modal="false"
        :visible.sync="isShowCaseDialog"
      >
        <div class="each cover">
          <b>*</b>
          <span>封面:</span>
          <img :src="caseObj.cover" alt="封面" v-if="caseObj.cover" />
          <Upload :name="caseObj.cover ? '重新上传' : '上传图片'" type="news" @saveCb="onUploadSuccess1"></Upload>
        </div>
        <div class="each">
          <b>*</b>
          <span>标题:</span>
          <el-input v-model="caseObj.title" placeholder="请输入标题"></el-input>
        </div>
        <div class="each">
          <b>*</b>
          <span>项目背景:</span>
          <el-input v-model="caseObj.remark1" placeholder="请输入项目背景"></el-input>
        </div>
        <div class="each">
          <b>*</b>
          <span>项目介绍:</span>
          <el-input v-model="caseObj.remark2" placeholder="请输入项目介绍"></el-input>
        </div>
        <div class="each">
          <b>*</b>
          <span>项目目标:</span>
          <el-input v-model="caseObj.remark3" placeholder="请输入项目目标"></el-input>
        </div>
        <div class="each1">
          <b>*</b>
          <span>内容:</span>
          <Quill ref="quill" :editContent="caseObj.content"></Quill>
        </div>
        <div class="btns">
          <div class="btn">
            <el-button type="info" @click="isShowCaseDialog = false">取消</el-button>
          </div>
          <div class="btn">
            <el-button type="primary" @click="saveCase">确定</el-button>
          </div>
        </div>
      </el-dialog>
    </el-tabs>
    <MyDialog
      title="删除"
      ref="deleteServe"
      lastText="删除"
      :colorType="true"
      @saveHandle="deleteServe"
    >
      <p class="tips">确定删除吗？</p>
      <p>删除后前台将不再显示</p>
    </MyDialog>
    <MyDialog title="删除" ref="deleteCase" lastText="删除" :colorType="true" @saveHandle="deleteCase">
      <p class="tips">确定删除吗？</p>
      <p>删除后前台将不再显示</p>
    </MyDialog>
  </div>
</template>
<script>
import Quill from "../components/quill";
import Upload from "./upload";
import MyDialog from "./dialog";
export default {
  name: "pAndS",
  components: {
    Quill,
    Upload,
    MyDialog
  },
  props: {
    type: {
      type: Number,
      default() {
        return 1;
      }
    }
  },
  data() {
    return {
      serveList: [],
      demoList: [],
      activeName: "first",
      isShowCaseDialog: false,
      isShowServeDialog: false,
      pageSie: 10,
      count: 0,
      currentPage: 1,
      serveTitle: "新增服务",
      caseTitle: "新增案例",
      dialogType: "add",
      serveObj: {
        cover: "",
        title: "",
        remark: ""
      },
      caseObj: {
        cover: "",
        title: "",
        remark1: "",
        remark2: "",
        remark3: "",
        content: ""
      },
      did: ""
    };
  },
  methods: {
    handleClick(tab, event) {
      this.getList();
    },
    //编辑服务
    handleEdit(row) {
      this.did = row.did;
      this.isShowServeDialog = true;
      this.serveTitle = "修改服务";
      this.dialogType = "edit";
      this.serveObj = {
        cover: "",
        title: "",
        remark: ""
      };
      this.$post("/product/business/info", { did: this.did }).then(res => {
        if (res.code == 200) {
          const { data } = res;
          this.serveObj = data.business;
        }
      });
    },
    handleDelete(row) {
      this.$refs.deleteServe.show();
      this.did = row.did;
    },
    //确认服务删除
    deleteServe() {
      this.$post("/product/business/delete", { did: this.did }).then(res => {
        if (res.code == 200) {
          this.$message.success("删除成功");
          this.$refs.deleteServe.hide();
          this.getList();
        }
      });
    },
    handleDeleteCase(row) {
      this.$refs.deleteCase.show();
      this.did = row.did;
    },
    //确认服务删除
    deleteCase() {
      this.$post("/product/demo/delete", { did: this.did }).then(res => {
        if (res.code == 200) {
          this.$message.success("删除成功");
          this.$refs.deleteCase.hide();
          this.getList();
        }
      });
    },
    //编辑案例
    handleEditCase(row) {
      this.did = row.did;
      this.isShowCaseDialog = true;
      this.caseTitle = "修改案例";
      this.dialogType = "edit";
      this.serveObj = {
        cover: "",
        title: "",
        remark1: "",
        remark2: "",
        remark3: "",
        content: ""
      };
      this.$post("/product/demo/info", { did: this.did }).then(res => {
        if (res.code == 200) {
          const { data } = res;
          this.caseObj = data.demo;
          this.$nextTick(() => {
            this.$refs.quill.onShow();
          });
        }
      });
    },

    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSie = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },
    //新增服务
    addServe() {
      this.dialogType = "add";
      this.isShowServeDialog = true;
      this.serveObj = {
        cover: "",
        title: "",
        remark: ""
      };
    },
    //获取服务列表
    getServeList() {
      this.$post("/product/business/list", {
        type: this.type
      }).then(res => {
        if (res.code == 200) {
          const { data } = res;
          this.serveList = data.businesses;
        }
      });
    },
    onUploadSuccess(val) {
      this.serveObj.cover = val;
    },
    //新增案例
    addCase() {
      this.dialogType = "add";
      this.isShowCaseDialog = true;
      this.caseObj = {
        cover: "",
        title: "",
        remark1: "",
        remark2: "",
        remark3: "",
        content: ""
      };
      this.$nextTick(() => {
        this.$refs.quill.onShow();
      });
    },
    onUploadSuccess1(val) {
      this.caseObj.cover = val;
    },

    //获取案例列表
    getCaseList() {
      this.$post("/product/demo/list", {
        type: this.type,
        page: this.currentPage,
        pageSie: this.pageSie
      }).then(res => {
        if (res.code == 200) {
          const { data } = res;
          this.demoList = data.demos;
          this.count = data.count;
        }
      });
    },
    getList() {
      if (this.activeName == "first") {
        this.getServeList();
      } else {
        this.getCaseList();
      }
    },
    //新增服务列表
    saveServe() {
      if (!this.serveObj.cover) {
        this.$message.error("请设置图标");
        return;
      }
      if (!this.serveObj.title) {
        this.$message.error("请输入标题");
        return;
      }
      if (!this.serveObj.remark) {
        this.$message.error("请输入简介");
        return;
      }
      if (this.activeName == "first") {
        if (this.dialogType == "add") {
          this.$post("/product/business/create", {
            title: this.serveObj.title,
            cover: this.serveObj.cover,
            remark: this.serveObj.remark,
            type: this.type
          }).then(res => {
            if (res.code == 200) {
              this.$message.success("新增成功");
              this.isShowServeDialog = false;
              this.getList();
            } else if (res.code == 94001) {
              this.$message.error("标题重复");
            }
          });
        } else {
          this.$post("/product/business/update", {
            title: this.serveObj.title,
            cover: this.serveObj.cover,
            remark: this.serveObj.remark,
            did: this.did
          }).then(res => {
            if (res.code == 200) {
              this.$message.success("编辑成功");
              this.isShowServeDialog = false;
              this.getList();
            } else if (res.code == 94001) {
              this.$message.error("标题重复");
            }
          });
        }
      }
    },
    //新增服务案例
    saveCase() {
      this.caseObj.content = this.$refs.quill.saveHtml();
      if (!this.caseObj.cover) {
        this.$message.error("请设置图片");
        return;
      }
      if (!this.caseObj.title) {
        this.$message.error("请输入标题");
        return;
      }
      if (!this.caseObj.remark1) {
        this.$message.error("请输入项目背景");
        return;
      }
      if (!this.caseObj.remark2) {
        this.$message.error("请输入项目介绍");
        return;
      }
      if (!this.caseObj.remark3) {
        this.$message.error("请输入项目目标");
        return;
      }
      if (!this.caseObj.content) {
        this.$message.error("请输入项目详情");
        return;
      }
      if (this.dialogType == "add") {
        this.$post("/product/demo/create", {
          title: this.caseObj.title,
          cover: this.caseObj.cover,
          content: this.caseObj.content,
          remark1: this.caseObj.remark1,
          remark2: this.caseObj.remark2,
          remark3: this.caseObj.remark3,
          content: this.caseObj.content,
          type: this.type
        }).then(res => {
          if (res.code == 200) {
            this.$message.success("新增成功");
            this.isShowCaseDialog = false;
            this.getList();
          } else if (res.code == 94005) {
            this.$$message.error("标题重复");
          }
        });
      } else {
        this.$post("/product/demo/update", {
          title: this.caseObj.title,
          cover: this.caseObj.cover,
          content: this.caseObj.content,
          remark1: this.caseObj.remark1,
          remark2: this.caseObj.remark2,
          remark3: this.caseObj.remark3,
          content: this.caseObj.content,
          did: this.did
        }).then(res => {
          if (res.code == 200) {
            this.$message.success("编辑成功");
            this.isShowCaseDialog = false;
            this.getList();
          } else if (res.code == 94005) {
            this.$$message.error("标题重复");
          }
        });
      }
    }
  },
  created() {
    this.getList();
  }
};
</script>
<style lang="less" scoped>
.pAndS {
  padding: 0 30px;
  header {
    text-align: right;
    padding: 10px 30px;
  }
  .imgs {
    width: 80px;
    height: 80px;
    img {
      width: 80px;
      height: 80px;
    }
  }
  .each {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    b {
      color: #fe6972;
    }
    > span {
      display: inline-block;
      width: 80px;
      margin-right: 20px;
    }
    > img {
      width: 80px;
      height: 80px;
      margin-right: 10px;
    }
  }
  .each1 {
    b {
      color: #fe6972;
    }
  }
  .btns {
    display: flex;
    margin-top: 20px;
    justify-content: center;
    .btn {
      margin-right: 20px;
    }
  }
  .file {
    position: relative;
    display: inline-block;
    background: #d0eeff;
    border: 1px solid #99d3f5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1e88c7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
  }
  .file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
  }
  .file:hover {
    background: #aadffd;
    border-color: #78c3f3;
    color: #004974;
    text-decoration: none;
  }
  .page {
    text-align: center;
    margin-top: 20px;
  }
  .tips {
    font-weight: normal;
    font-size: 32px;
    margin-bottom: 50px;
  }
}
</style>
